<script setup lang="ts">
import {computed} from "vue";
import {useAppConfigStore} from "@/store/system/appConfigStore";

const qqGroup = computed(() => useAppConfigStore().qqGroup)
const qqNumber = computed(() => useAppConfigStore().qqNumber)
const github = computed(() => useAppConfigStore().github)
const gitee = computed(() => useAppConfigStore().gitee)
const email = computed(() => useAppConfigStore().email)
const weChat = computed(() => useAppConfigStore().weChat)
</script>

<template>
  <section class="followUs rounded-xl">
    <a-card class="rounded-xl">
      <template #title>
        <span class="flex text-center w-full justify-center items-center">关注我们</span>
      </template>
      <ul class="flex flex-col gap-4">
        <li class="qqGroup" v-if="qqGroup">
          <a href="javascript:void(0);">
            <span>QQ群</span>{{ qqGroup }}
          </a>
        </li>
        <li class="qq" v-if="qqNumber">
          <a
              :href="'//tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=' + qqNumber"
              target="_blank">
            <span>QQ号</span>{{ qqNumber }}
          </a>
        </li>
        <li class="email" v-if="email">
          <a
              href="javascript:void(0);">
            <span>邮箱</span>{{ email }}
          </a>
        </li>
        <li class="wxgzh" v-if="weChat">
          <a
              href="javascript:void(0);">
            <span>微信</span>{{ weChat }}
          </a>
        </li>
        <li class="github" v-if="github">
          <a :href="github"
             target="_blank">
            <span>Github</span>{{ github }}
          </a>
        </li>
        <li class="gitee" v-if="gitee">
          <a :href="gitee"
             target="_blank">
            <span>Gitee</span>{{ gitee }}
          </a>
        </li>
      </ul>
    </a-card>
  </section>
</template>

<style scoped lang="less">
.followUs{
  border: thin solid rgb(203 213 225);
}
:deep(.ant-card-head) {
  border-bottom: none;
}
.followUs ul li {
  font-size: 12px;
  margin-bottom: 10px;
  background: #fff;
  color: #525252;
  line-height: 40px;
  padding: 0 0 0 34px;
  border: 1px solid #DDD;
  border-radius: 2px;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.followUs .sina {
  border: #ec3d51 1px solid;
  background: url(@/assets/guanzhu/gzbg.jpg) no-repeat 0 10px
}

.followUs .tencent {
  border: #68a6d6 1px solid;
  background: url(@/assets/guanzhu/gzbg.jpg) no-repeat 0 -43px
}

.followUs .qq {
  border: #2ab39a 1px solid;
  background: url(@/assets/guanzhu/gzbg.jpg) no-repeat 0 -98px
}

.followUs .qqGroup {
  border: #EB6841 1px solid;
  background: url(@/assets/guanzhu/qqGroup.png) no-repeat;
  background-size: 22px;
  background-position-y: 47%;
}

.followUs .email {
  border: #12aae8 1px solid;
  background: url(@/assets/guanzhu/gzbg.jpg) no-repeat 0 -150px
}

.followUs .wxgzh {
  border: #199872 1px solid;
  background: url(@/assets/guanzhu/gzbg.jpg) no-repeat 0 -200px
}

.followUs .github {
  border: #000000 1px solid;
  background: url(@/assets/guanzhu/github.jpg) no-repeat;
  background-size: 25px;
  background-position-y: 47%;
}

.followUs .gitee {
  border: #E93B3C 1px solid;
  background: url(@/assets/guanzhu/gitee.jpg) no-repeat;
  background-size: 25px;
  background-position-y: 47%;
}

.followUs .wx {
  overflow: hidden;
  padding: 0
}

.followUs .wx img {
  width: 100%;
}

.followUs ul li span {
  float: right;
  text-align: center;
  width: 85px;
  transition: all 0.5s;
}

.followUs .sina span {
  background: #ec3d51;
}

.followUs .tencent span {
  background: #68a6d6;
}

.followUs .qq span {
  background: #2ab39a;
}

.followUs .qqGroup span {
  background: #EB6841;
}

.followUs .email span {
  background: #12aae8;
}

.followUs .wxgzh span {
  background: #199872;
}

.followUs .github span {
  background: #000000;
}

.followUs .gitee span {
  background: #E93B3C;
}

.followUs a span {
  color: #FFF
}

.followUs ul li:hover span {
  width: 100px;
}
</style>
